<template>
  <div >
    <div class="top">
        <div class="left fl">
            <img src="../../assets/images/people.png" alt="">
        </div>
        <div class="right fl">
            <p class="name">{{name.xm}}</p>
            <p>身份证号：{{name.zjhm}}</p>
            <!--<p>手机号： 159*********</p>-->
            <p>就诊时间: <span>{{YyAppointment.jzsj}}</span></p>
            <p>(具体取号或就诊时间以短信为准）</p>
        </div>
    </div>
    <div class="bottom">
        <div class="title">
            <span></span>转诊信息
        </div>
        <div class="text">
            <p>
                <span>转出医院：</span>{{YyAppointment.zcyy}}
            </p>
            <p>
                <span>转出科室：</span>{{YyAppointment.zcks}}
            </p>
            <p>
                <span>转出医生：</span>{{YyAppointment.zcys}}
            </p>
            <p>
                <span>转出原因：</span>{{YyAppointment.zzyy}}
            </p>
            <p>
                <span>转入医院：</span>{{YyAppointment.zryy}}
            </p>
            <p class="time">
                <span>预约就诊时间：</span>{{YyAppointment.jzsj}}
            </p>
            <p>
                <span>转入科室：</span>{{YyAppointment.zrks}}
            </p>
        </div>
        <div class="text">
            <!--<p>-->
                <!--<span>转诊单号：</span>014***********240-->
            <!--</p>-->
            <p>
                <span>预约时间：</span>{{YyAppointment.zcrq}}
            </p>
        </div>
    </div>
    <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
    <tips :hosName="hosName"></tips>
    <!-- 水印 -->
    <div class="watermark"></div>
  </div>
</template>

<script>
import tips from '@/components/tips.vue'
export default {
  name: 'yyzzDetail',
  data () {
    return {
        hosName:JSON.parse(localStorage.getItem('mzjbxx')).zcyy,//医院名称
        name:JSON.parse(localStorage.getItem('jbxx')),
        YyAppointment:JSON.parse(localStorage.getItem('mzjbxx'))
    }
  },
    methods: {

    },
    created() {

    },
  components:{
      tips
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float: left;
}
.fr{
    float: right;
}
.top{
    background: #fff;
    overflow: hidden;
    margin-bottom: 0.3rem;
    padding:0.6rem 1rem;
    .left{
        margin-right: 1rem;
        img{
            width: 2.3rem;
        }
    }
    .right{
        font-size: 1rem;
        color:#666;
        .name{
            color: #323333;
            font-size: 1.2rem;
        }
        span{
            color: #009CDF;
        }
        p{
            margin-bottom: 0.3rem;
        }
        p:last-child{
            color:#999;
        }
    }
}
.bottom{
    background: #fff;
    padding:1rem;
    .title{
        color: #009CDF;
        font-size: 1.2rem;
        span{
            display: inline-block;
            width: 0.3rem;
            height: 1rem;
            background: linear-gradient(0deg,rgba(47,152,240,1),rgba(99,217,245,1));
            margin-right: 0.5rem;
            vertical-align: middle;
        }
    }
    .text{
        padding-left: 0.9rem;
        font-size: 1rem;
        color:#333;
        line-height: 2rem;
        margin-top:0.5rem;
        border-bottom:#DCDCDC solid 1px;
        padding-bottom:1rem;
        span{
            color: #969696;
        }
        .time{
            color:#009CDF;
        }
    }
    .text:last-child{
        padding-top:0.5rem;
        border:none
    }

}
</style>
